<template>
  <Form ref="formData" class="formContent" :model="formData" :label-width="75" inline>
    <Row type="flex">
    <Col span="6">
    <FormItem label="账单期间:" prop="rangDate">
      <DatePicker type="daterange" @on-change="changeData" format="yyyy/MM/dd" v-model="formData.rangDate"></DatePicker>
    </FormItem>
    </Col>
    <Col span="5">
    <FormItem label="企业名称:" prop="companyName">
      <Input placeholder="请输入" :style="formWidth" maxlength="50" v-model="formData.companyName"/>
    </FormItem>
    </Col>
    <Col span="5">
    <FormItem label="账户名称:" prop="accountName">
      <Input placeholder="请输入" :style="formWidth" maxlength="50" v-model="formData.accountName"/>
    </FormItem>
    </Col>
    <Col span="5">
    <FormItem label="账单号:" prop="accountNumber">
      <Input placeholder="请输入" :style="formWidth" maxlength="50" v-model="formData.accountNumber"/>
    </FormItem>
    </Col>
    <Col span="3" class="colRight">
    <FormItem :label-width="0">
      <Button type="primary" @click="handleQuery">查询</Button>
      <Button type="primary" ghost @click="handleReset('formData')">重置</Button>
    </FormItem>
    </Col>
    </Row>


    <Row type="flex">
    <Col span="6">
    <FormItem label="发票抬头:" prop="invoiceTitle">
      <Input placeholder="请输入" :style="formWidth" maxlength="50" v-model="formData.invoiceTitle"/>
    </FormItem>
    </Col>
    <Col span="5">
    <FormItem label="发票类型:" prop="invoiceType">
      <Select v-model="formData.invoiceType" clearable :style="formWidth">
        <Option v-for="(item, index) in invoiceTypeData" :value="item.type" :key="index">{{item.name}}</Option>
      </Select>
    </FormItem>
    </Col>
    <Col span="5">
    <FormItem label="开票状态:" prop="invoiceStatus">
      <Select v-model="formData.invoiceStatus" clearable :style="formWidth">
        <Option v-for="(item, index) in invoiceStatusData" :value="item.type" :key="index">{{item.name}}</Option>
      </Select>
    </FormItem>
    </Col>
    </Row>

  </Form>
</template>

<script>
export default {
  name: 'BilllHeader',
  props: {
    formData: {
      type: Object
    },
    type: {
      type: String,
      default: 'entry' // 'claim'认领， 'entry'录入
    },
    checkedStatus: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      formWidth:{
        width:'190px'
      },
      invoiceTypeData: [
        {type: 'ALL', name: '全部'},
        {type: 'COMPANY', name: '个人发票'},
        {type: 'OFFLINE', name: '企业发票'}
      ],
      invoiceStatusData: [
        {type: 'ALL', name: '已开票'},
        {type: 'COMPANY', name: '未开票'},
      ],
      showPartner: false,
      // 批量认领可点击状态
      disableds: true
    }
  },
  methods: {
    handleQuery () {
      this.$emit('handleQuery')
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields();
      console.log(this.$refs[name],101 );
      
    },
    changeData (val) {
      this.formData.rangDate = val
    }
  },
  watch: {
    'formData.paymentMode' (val) {
      if (val === 'OFFLINE') {
       this.clearPartner()
      }
    },
    checkedStatus(val){
     this.disableds = val == 0
    }
  }
}
</script>

<style lang="scss" scoped>
.formContent{
  min-width: 1390px;
  padding: 24px;
  background-color: #fff;
  /deep/ .ivu-form-item{
    margin-right: 0;
    .ivu-input-with-suffix{
      width: 240px;
    }
  }
  /deep/ .colRight{
    text-align: right;
  }
  /deep/ button:first-child{
    margin-right: 20px;
  }
  /deep/ button{
    padding: auto 20px;
  }
}
</style>
